<!DOCTYPE html>
<html>
  <head>
    <title>SSqlaudit Ex</title>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      body{
        width: 320px;
        height: 400px;
        font-family: -apple-system, Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Source Han Sans SC", "Microsoft YaHei", Heiti, SimSun, sans-serif;
      }
      h1{
        padding-top: 20px;
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 20px;
        text-align: center;
      }
      ul,li{
        list-style: none;
        font-size: 14px;
        color: #000;
      }
      ul{
        display: flex;
        flex-direction: column;
        height:330px;
      }
      li{
        padding: 10px 16px 10px 24px;
        position: relative;
        flex-grow: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      li textarea{
        width: calc(100% - 60px);
        border:none;
        -webkit-appearance:none;
        resize: none;
        height: fit-content;
        background: transparent;
        outline: none;
      }
      li:after{
        content:'';
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 100%;
        background-image: linear-gradient(-225deg, #fad0c4 0%, #ffd1ff 100%);
        z-index: -1;
      }
      li:nth-of-type(2):after{
        background-image: linear-gradient(-225deg, #7DE2FC 0%, #B9B6E5 100%);
      }
      li:nth-of-type(3):after{
        background-image: linear-gradient(-225deg, #D4FFEC 0%, #57F2CC 48%, #4596FB 100%);
      }
      li:hover:after{
        width: 100%;
        transition: all 0.5s;
      }

      a{
        cursor: pointer;
        text-decoration: none;
        width: 50px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        background:#4cd964 ;
        color: #fff;
        border-radius: 4px;
        margin-left: 12px;
      }
    </style>
  </head>
  <body>
    <h1>SQL Storage</h1>
    <div role="main">
       <ul>
       </ul>
        
    
    </div>
  </body>
  <script src="popup.js"></script>
</html>